<template>
    <div class="intro-detail">
        <el-button size="small" class="goBack" @click="goBack">返回</el-button>
        <div class="input-group">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">医院名称</label>
                        <el-input v-model="name" size="small" :disabled="true"></el-input>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">医院编码</label>
                        <el-input v-model="code" size="small" :disabled="true"></el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">咨询电话</label>
                        <el-input
                                maxlength="20"
                                size="small"
                                v-model="phone"
                                onkeyup="value=value.replace(/[^\d-,，]/g,'')"
                        ></el-input>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">所在地址</label>
                        <el-input
                                maxlength="100"
                                v-model="address"
                                size="small"
                        ></el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">急救电话</label>
                        <el-input
                                maxlength="20"
                                size="small"
                                v-model="emergencyCalls"
                                onkeyup="value=value.replace(/[^\d-]/g,'')"
                        ></el-input>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">医院邮箱</label>
                        <el-input maxlength="20" v-model="email" size="small"></el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">官方网址</label>
                        <el-input maxlength="100" v-model="website" size="small"></el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <div class="grid-content">
                        <label for="" style="line-height:40px">乘车路线</label>
                        <el-input
                                type="textarea"
                                maxlength="200"
                                :rows="3"
                                placeholder=""
                                v-model="busRoute"
                        >
                        </el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <div class="grid-content">
                        <label for="" style="line-height:40px">医院介绍</label>
                        <el-input
                                type="textarea"
                                maxlength="200"
                                :rows="3"
                                placeholder=""
                                v-model="description"
                        >
                        </el-input>
                    </div>
                </el-col>
            </el-row>
<!--            <el-row :gutter="20">-->
<!--                <el-col :span="12">-->
<!--                    <div class="grid-content">-->
<!--                        <label for="">医院图标</label>-->
<!--                        <el-upload-->
<!--                                class="icon-uploader"-->
<!--                                action=""-->
<!--                                :show-file-list="false"-->
<!--                                accept=".jpg, .jpeg, .png, .JPG,.JPEG, .PNG"-->
<!--                                :http-request="uploadIcon"-->
<!--                        >-->
<!--                            <img v-if="iconUrl" :src="iconUrl" id="avatarIcon" />-->
<!--                            <img v-else src="../../assets/images/weisahgnchuan.png" class="avatarIcon">-->
<!--                            <span>点击上传</span>-->
<!--                        </el-upload>-->
<!--                    </div>-->
<!--                </el-col>-->

<!--                <el-col :span="12">-->
<!--                    <div class="grid-content">-->
<!--                        <label for="">医院图片</label>-->
<!--                        <el-upload-->
<!--                                class="pic-uploader"-->
<!--                                action=""-->
<!--                                :show-file-list="false"-->
<!--                                accept=".jpg, .jpeg, .png, .JPG,.JPEG, .PNG"-->
<!--                                :http-request="uploadPic"-->
<!--                        >-->
<!--                            <img v-if="picUrl" :src="picUrl" id="avatarPic" />-->
<!--                            <img v-else src="../../assets/images/weisahgnchuan.png" class="avatarPic">-->
<!--                            <span>点击上传</span>-->
<!--                        </el-upload>-->
<!--                    </div>-->
<!--                </el-col>-->
<!--            </el-row>-->
            <div class="btn-group">
                <el-button type="primary" size="small" @click="update">保存</el-button>
                <el-button size="small" @click="fail">放弃</el-button>
            </div>
            <div class="popup">
                <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
                    <span>是否确定放弃本次操作？</span>
                    <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">我再想想</el-button>
          <el-button type="primary" @click="giveup">确定放弃</el-button>
        </span>
                </el-dialog>
            </div>
            </div>
    </div>
</template>

<script>
    import {hospitalSelect, hospitalUpdate} from "../../api/hospital";

    export default {
        name: "edit",
        data() {
            return {
                name:'',
                code:'',
                phone:'',
                address:'',
                emergencyCalls:'',
                email:'',
                website:'',
                busRoute:'',
                description:'',
                iconUrl:'',
                picUrl:'',
                dialogVisible: false
            }
        },

        created() {
            this.getList();
        },

        mounted() {

        },

        methods: {
            goBack(){
                this.$router.go(-1);
            },
            async getList(){
                let {list} = await hospitalSelect({
                    hi_id:sessionStorage.getItem('hospitalId'),
                    pageIndex:1,
                    pageSize:1,
                })
                this.name = list[0].hi_name;
                this.code = list[0].hi_id;
                this.phone = list[0].hi_phone;
                this.address =list[0].hi_address;
                this.emergencyCalls = list[0].hi_emergencyCalls;
                this.email = list[0].hi_email;
                this.website = list[0].hi_website;
                this.busRoute = list[0].hi_busRoute;
                this.description = list[0].hi_description;
                this.iconUrl = list[0].hi_iconUrl == 'null' ? '':list[0].hi_iconUrl;
                this.picUrl = list[0].hi_picUrl == 'null' ? '':list[0].hi_picUrl;
            },
            uploadIcon(){
                console.log('icon上传');
            },
            uploadPic(){
                console.log('图片上传');
            },
            async update(){
                let res = await hospitalUpdate({
                    hi_name:this.name,
                    hi_id:this.code,
                    hi_phone:this.phone,
                    hi_address:this.address,
                    hi_emergencyCalls:this.emergencyCalls,
                    hi_email:this.email,
                    hi_website:this.website,
                    hi_busRoute:this.busRoute,
                    hi_description:this.description,
                    hi_iconUrl:this.iconUrl,
                    hi_picUrl:this.picUrl,
                })
                if(res){
                    this.$message.success(res.msg)
                    this.$router.push({
                        path: "/hospitalInfo/detail"
                    });
                }
            },
            fail() {
                this.dialogVisible = true;
            },
            giveup(){
                this.dialogVisible = false;
                this.$router.push({
                    path: "/hospitalInfo/detail"
                });
            }
        },
    }
</script>

<style scoped lang='scss'>
    .intro-detail {
        width: 100%;
        box-sizing: border-box;
    }

    .goBack {
        margin: 0 0 10px 20px;
    }

    .input-group {
        background: #fff;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
        margin: 0 20px 20px 20px;

        .el-row {
            display: flex;
            width: 100%;
            margin: 0 0 20px 0;

            .el-col,
            .el-col-12 {
                .grid-content {
                    display: flex;
                    align-content: center;

                    label {
                        display: inline-block;
                        flex: 0 0 80px;
                        line-height: 32px;
                        text-align: right;
                        margin-right: 10px;
                    }

                    .icon-uploader {
                        width: 80px;
                        height: 80px;
                        border: 1px dashed #ccc;
                        cursor: pointer;
                        position: relative;
                        overflow: hidden;
                        text-align: center;

                        .el-upload {
                            height: 80px;

                            img {
                                width: 80px;
                                height: 80px;
                            }
                        }

                        span {
                            color: #ccc;
                            display: block;
                            font-size: 12px;
                            line-height: 80px;
                        }
                    }

                    .icon-uploader:hover {
                        border: 1px dashed #409eff;
                    }

                    .icon-uploader:hover span {
                        color: #409eff;
                    }

                    .pic-uploader {
                        width: 130px;
                        height: 80px;
                        border: 1px dashed #ccc;
                        cursor: pointer;
                        position: relative;
                        overflow: hidden;
                        text-align: center;

                        .el-upload {
                            height: 80px;

                            span {
                                color: #ccc;
                                display: block;
                                font-size: 12px;
                                line-height: 80px;
                            }

                            img {
                                width: 176px;
                                height: 80px;
                            }
                        }
                    }

                    .pic-uploader:hover {
                        border: 1px dashed #409eff;
                    }

                    .pic-uploader:hover span {
                        color: #409eff;
                    }

                    .qr-uploader {
                        width: 120px;
                        height: 120px;
                        border: 1px dashed #ccc;
                        cursor: pointer;
                        position: relative;
                        overflow: hidden;
                        text-align: center;

                        .el-upload {
                            height: 120px;

                            span {
                                color: #ccc;
                                display: block;
                                font-size: 12px;
                                line-height: 120px;
                            }

                            img {
                                width: 120px;
                                height: 120px;
                            }
                        }
                    }

                    .qr-uploader:hover {
                        border: 1px dashed #409eff;
                    }

                    .qr-uploader:hover span {
                        color: #409eff;
                    }
                }
            }
        }
    }

    .el-divider--horizontal {
        margin-top: 20px;
    }

    .btn-group {
        margin: 0 20px 20px 20px;
        text-align: center;
    }
    .grid-content {
        display: flex;
        align-content: center;
        .desc {
            line-height: 32px;
            &.hospital-desc {
                margin-top: 8px;
            }
            &.line-desc {
                line-height: 40px;
            }
        }
        label {
            display: inline-block;
            flex: 0 0 80px;
            line-height: 32px;
            text-align: right;
            margin-right: 10px;
        }
        .icon-uploader {
            width: 80px;
            height: 80px;
            border: 1px dashed #ccc;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            text-align: center;
            .el-upload {
                height: 80px;
                img {
                    width: 80px;
                    height: 80px;
                }
            }
        }
        .icon-uploader:hover {
            border: 1px dashed #409eff;
        }
        .icon-uploader:hover span {
            color: #409eff;
        }
        span {
            color: #ccc;
            display: block;
            font-size: 12px;
            line-height: 80px;
        }
        .pic-uploader {
            width: 130px;
            height: 80px;
            border: 1px dashed #ccc;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            text-align: center;
            .el-upload {
                height: 80px;
                span {
                    color: #ccc;
                    display: block;
                    font-size: 12px;
                    line-height: 80px;
                }
                img {
                    width: 130px;
                    height: 80px;
                }
            }
        }
        .pic-uploader:hover {
            border: 1px dashed #409eff;
        }
        .pic-uploader:hover span {
            color: #409eff;
        }
        .qr-uploader {
            width: 120px;
            height: 120px;
            border: 1px dashed #ccc;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            text-align: center;
            .el-upload {
                height: 120px;
                img {
                    width: 120px;
                    height: 120px;
                }
            }
        }
        .qr-uploader:hover {
            border: 1px dashed #409eff;
        }
        .qr-uploader:hover span {
            color: #409eff;
        }
        #avatarIcon {
            height: 80px;
            width: 80px;
        }
        #avatarPic {
            height: 80px;
            width: 130px;
        }
        #avatarQr {
            height: 130px;
            width: 130px;
        }
    }

    #hospitalMap {
        width: 90%;
        height: 250px;
        margin-left: 25px;
    }
</style>